<template>
  <div class="container">
    <el-input v-model="search" placeholder="请输入用户昵称搜索"></el-input>
    <el-button class="search" @click="getClubList()" type="primary" size="small"
      >搜索</el-button
    >
    <el-button @click="resetSearch()" type="warning" size="small"
      >重置</el-button
    >

    <el-table :data="tableData" style="width: 80%">
      <el-table-column width="150px" label="序号" type="index">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户昵称" width="200">
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="200">
      </el-table-column>
      <el-table-column prop="appStatus" label="申请状态" width="200">
        <template scope="scope">
          <span v-if="scope.row.appStatus == 2" style="color: #e0cd71"
            >等待审核</span
          >
          <span v-if="scope.row.appStatus == 0" style="color: red"
            >申请失败</span
          >
          <span v-if="scope.row.appStatus == 1" style="color: #37b328"
            >申请成功</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="applicationDate" label="申请日期" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.appStatus == 2" style="color: #e0cd71">
            <el-button
              @click="handleClickAgree(scope.$index, scope.row)"
              size="small"
              type="success"
              >同意</el-button
            >
            <el-button
              @click="handleClickRefuse(scope.$index, scope.row)"
              size="small"
              type="danger"
              >拒绝</el-button
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block" align="right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 4, 5, 6]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/api/request'

export default {
  name: 'Apply',
  data() {
    return {
      // 分页展示的数据
      tableData: [],
      pageSize: 6,
      currentPage: 1,
      totalCount: 0,
      // 搜索框
      search: '',
      //选项卡
      value: '',

      ruleForm: {
        username: '',
        nickname: '',
        appStatus: 2,
        applicationDate: '',
      },
    }
  },
  methods: {
    //查询所有申请
    getAllApplication() {
      request
        .get('/president/applyuser', {
          params: {
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.items
          this.totalCount = res.data.total
        })
    },

    handleSizeChange: function (size) {
      //size是该函数自带的参数，代表变化后的每页显示的条数
      this.pageSize = size
      this.getAllApplication()
    },

    handleCurrentChange: function (currentPage) {
      //currentPage是该函数自带的参数，代表变化后的页码
      this.currentPage = currentPage
      this.getAllApplication()
    },

    //同意申请
    handleClickAgree(index, row) {
      const param = new URLSearchParams()
      param.append('id', row.id)
      param.append('appStatus', 1)
      request
        .post('/president/applyClub', param)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message)
            setTimeout(() => {
              this.getAllApplication()
            })
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    //拒绝申请
    handleClickRefuse(index, row) {
      console.log(row)
      const param = new URLSearchParams()
      param.append('id', row.id)
      param.append('appStatus', 0)
      request
        .post('/president/applyClub', param)
        .then((res) => {
          if (res.code === 200) {
            this.getAllApplication()
          }
        })
        .catch((error) => {
          this.getAllApplication()
        })
    },

    //格式化申请状态
    formatAppStatus(row, column) {
      if (row.appStatus === 0) {
        return '申请失败'
      } else if (row.appStatus === 1) {
        return '申请成功'
      } else if (row.appStatus === 2) {
        return '等待审核'
      }
    },
  },
  created() {
    this.getAllApplication()
  },
}
</script>

<style scoped>
.container {
  padding-top: 20px;
}
.el-input {
  width: 300px;
  padding-left: 50px;
  margin-bottom: 20px;
}
.search {
  margin-left: 20px;
}
</style>
